<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
              <p class="flex flex_vcenter pdb20">
                <i class="titleTag"></i>
                <span class="fRedBig">就诊安排</span>
              </p>
                <div class="contain bg">
                    <div class="topblank">
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="请输入主管医生姓名" v-model="searchcon">
                        </div>
                        <!--  <div class="col-md-3">
                            <button class="default blue" @click="getsearchlist">搜索</button>
                        </div> -->
                    </div>
                    <div class="maindoclists">
                        <table class="table">
                            <tbody>
                                <tr v-for="item in maindoclists | filterBy searchcon in 'name' " track-by="$index">
                                    <td>
                                        <img :src="item.avatarFileId" class="fl">
                                        <div class="fl lectureTitle">
                                            <h3>{{item.name}}<span>{{item.levelText}}</span></h3>
                                            <p><span>{{item.orgName}}</span><span>|</span><span>{{item.deptName}}</span></p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>擅长：{{item.speciality}}</p>
                                    </td>
                                    <td>
                                        <button class="default ok" @click="patientvisitplanlist(item)">预约信息></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 就诊安排 -->
        <div class="modal fade bs-example-modal-lg" id="patientvisitplan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">患者就诊安排—— {{showdata.name}}-{{showdata.levelText}}</h4>
                    </div>
                    <div class="modal-body contain2">
                        <div></div>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>患者</th>
                                    <th>就诊地点</th>
                                    <th>就诊时间</th>
                                    <th></th>
                                </tr>
                                <tr v-for="item in patientlists" track-by="$index">
                                    <td>
                                        <img :src="item.avater" class="fl" id="docheadimg">
                                        <div class="fl w400">
                                            <p>
                                                <span>{{item.personName}}</span>
                                                <button type="button" class="btn btn-default vip">
                                                    <span>{{item.memberTypeText}}</span>
                                                </button>
                                                <button type="button" class="btn btn-default disease" v-for="subitem in item.chronicList">{{subitem.chronicName}}</button>
                                            </p>
                                        </div>
                                    </td>
                                    <td>
                                        <p>{{item.orgName}}</p>
                                        <p>{{item.deptName}}</p>
                                    </td>
                                    <td>
                                        <p>{{item.planDate}}</p>
                                          <p>{{item.planClasstext}}</p>
                                    </td>
                                    <td>
                                        <p :class="{green:item.serviceRecordState=='02',orange:item.serviceRecordState=='01',red:item.serviceRecordState=='03'}">{{item.serviceRecordStateText}}</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
export default {
    data() {
            return {
                searchcon: "",
                maindoclists: [],
                patientlists:[],
                showdata:{
                    levelText:"",
                    name:"",
                }
            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList
        },
        ready() {
            var that = this;
            // 会员类型列表
            $.when(Public.commonajax("coms.doctorPlanService", "queryPatientVisitPlanList", "[[]]")).done(function(res) {
                if (res.code == 200) {
                    $.each(res.body, function(index, el) {
                        el.avatarFileId = Public.IMGVIEW_URL() + el.avatarFileId
                    });
                    that.maindoclists = res.body;
                }

            });

        },
        methods: {
            //点击查看病人就诊列表
            patientvisitplanlist(item) {
                    var that=this;
                    this.showdata=item;
                    $("#patientvisitplan").modal("show")
                    $.when(Public.commonajax("coms.doctorPlanService", "queryMpiVisitPlan", "['061','"+item.doctorId+"']")).done(function(res) {
                        if (res.code == 200) {
                            $.each(res.body, function(index, el) {
                                el.avater = Public.IMGVIEW_URL() + el.avater;
                                if(el.planClass==1){
                                    el.planClasstext="上午"
                                }else if(el.planClass==2){
                                     el.planClasstext="下午"
                                }else{
                                     el.planClasstext="晚上"
                                }
                            });
                            that.patientlists = res.body;
                        }

                    });
                },



        },
        events: {



        },
        watch: {

        },
}
</script>
<style scoped>
/*会员列表*/

.contain .maindoclists {
    padding: 20px 30px
}

.contain table td:nth-child(3) {
    padding-top: 20px;
}

.contain table tr td:nth-child(1) {
    text-align: left;
    width: 400px
}

.table>tbody>tr>td {
    border-bottom: 1px dashed #ddd;
    border-top: none;
}

.contain .table td h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    color: #1dc499
}

.contain .table td h3 span {
    font-weight: normal;
    color: #9A9A9A;
    padding-left: 10px
}

.contain .table td p {
    color: #9A9A9A;
    line-height: 30px;
}

.contain .table td p span {
    color: #333;
    padding-right: 10px;
}

.topblank {
    background: #fafafa;
    border-radius: 10px 10px 0 0;
    height: 50px;
    border-bottom: 1px solid #ddd;
    padding-top: 8px
}

table tr td img {
    margin: 10px 20px 10px 0;
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.lectureTitle {
    width: 300px
}

button.ok {
    border: #1dc499 1px solid;
    background: none;
    color: #1dc499
}

.contain2 table p button.disease {
    border: 1px solid #1dc499;
    color: #1dc499;
    padding: 1px 8px;
    margin-left: 3px;
    cursor: default;
    margin-bottom: 5px;
}

.contain2 table p button.vip {
    border: 1px solid #ff8c68;
    color: #ff8c68;
    padding: 1px 8px;
    margin-left: 3px;
    margin-bottom: 5px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    background: none;
    cursor: default;
}

.contain2 table tr td:nth-child(1) {
    text-align: left;
    width: 400px
}

.w400 {
    width: 300px
}

.contain2 .table>tbody>tr>th {
    border-top: none;
    background: #fafafa;
    text-align: center;
}

.contain2 .table>tbody>tr>td {
    padding-top: 20px;
    text-align: center;
}
.contain2 .table>tbody>tr>td>div.fl{
text-align: left;
padding-top: 20px;
}

.contain2 .table td p.red {
    color: #ef5037;
}

.contain2 .table td p.orange {
    color: #fdab36;
}

.contain2 .table td p.green {
    color: #1dc499;
}

.contain2 {
    height: 500px;
    overflow: auto
}

.contain2 .table>tbody>tr>td:nth-child(4) {
    text-align: left
}

</style>
